<template>
  <div :class="['mask',loginVisible == true?'':'hide']">
    <div class="main-container">
        <!-- 顶部栏 -->
        <div class="top">
            <div class="exit" @click="loginVisible = false">×</div>
        </div>
        <!-- 左边内容 -->
        <div class="left-container">
            <!-- 小红书图标 -->
            <div class="img centerEle">
                <img src="../assets/img/login/b40942b023db46892660ffedb5b62617bc5606da.png" />
            </div>
            <!-- 非教程区 -->
            <div :class="[playMp4 == false?'mar':'hide']">
                <!-- 二维码放置区 -->
                <div class="QRCode-block centerEle">
                    <div class="QRCode fourSides-center">
                        <img src="../assets/img/login/小红书登录码.png" />
                    </div>
                </div>
                <!-- 描述性文本 -->
                <div class="describe-text centerEle">
                    <span> 使用 小红书 / 微信 / QQ 扫码登录 </span>
                </div>
            </div>
            <!-- 教程区域 -->
            <div :class="['tutorial-block', 'centerEle', playMp4?'':'hide']">
                <video class="mp4" style="-o-object-fit: cover;object-fit: cover;display: block;" x5-playsinline="" playsinline="" webkit-playsinline="" autoplay="true" loop muted>
                    <source :src="require('../assets/img/mp4/f3ddbc4d8062e08c8684e1fa3bea7c2e2bb77c21.mp4')" type="video/mp4" >
                </video>
            </div>
            <!-- 播放教程按钮 hover -->
            <div class="tutorial-block-control centerEle" @mouseenter="mouseenter" @mouseleave="mouseleave">
                <span> <i v-if="playMp4" class="el-icon-video-pause"></i><i v-else class="el-icon-video-play"></i>&nbsp;&nbsp;教程 </span>
            </div>
        </div>
        <!-- 垂直中线 -->
        <div class="center-boder"></div>
        <!-- 右边内容 -->
        <div class="right-container">
            <!-- 标题 -->
            <h3 class="title">账号密码登陆</h3>
            <!-- 表单收集信息 -->
            <div class="from-style">
                <el-form :model="loginFrom">
                    <el-form-item>
                        <div class="describes">
                            <input :class="[isFocused1?'myseleipt':'myipt', 'centerEle', 'btnfj', 'padding-left-1']" v-model="loginFrom.username" placeholder="请输入账号" @click="handleInput(1)" />
                            <div class="describe-text-1"><!-- +86 --></div>
                        </div>
                        <div class="describes">
                            <input :class="[isFocused2?'myseleipt':'myipt', 'centerEle', 'padding-left-2']" type="password" v-model="loginFrom.password" placeholder="请输入密码" @click="handleInput(2)" />
                            <div class="describe-text-2"><!-- 获取验证码 --><span :class="[waitingTime == 0?'':'hide']" @click="getVerify"><!-- 获取验证码 --></span><span :class="[waitingTime > 0?'':'hide']">重新获取 ({{ waitingTime }})</span></div>
                        </div>
                        </el-form-item>
                </el-form>
                <div class="btndiv">
                    <el-button type="danger" round class="login-btn" @click="goLogin">登录</el-button>
                </div>
                <!-- 协议内容 -->
                <div class="agreement centerEle">
                    <input ref="myRadio" type="radio" :v-model="treatyRadio" @click="treaty" />
                    <span class="agreementTxt">
                        我已阅读并同意《用户协议》《隐私政策》 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《儿童/青少年个人信息保护规则》
                    </span>
                </div>
                <!-- 其他方式登录 -->
                <div class="otherwise-login centerEle">
                    <div class="top-box"></div>
                    <div class="txt-box fourSides-center">或</div>
                    <div class="bottom-box"></div>
                </div>
                <!-- 链接按钮 -->
                <div class="link-btn centerEle">
                    <div class="wx">
                        <button class="btns" @click="wxLogin">微信登录</button>
                        <div class="wxsmd-img"><img src="../assets/img/login/6facfe15619216d04f18a5126b6e71f.png" /></div>
                    </div>
                    <button class="btns" @click="newUserRegister">新用户注册</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 微信登录的提示 -->
    <div :class="[agreement?'':'hide', 'wx-tip']">
        <!-- 提示内容 -->
        <div class="tip-content">
            <div class="text-info">
                <h4>阅读并同意</h4>
                《用户协议》《隐私政策》
                <br />
                《儿童/青少年个人信息保护规则》
                <br />
            </div>
            <div class="btn-info">
                <button class="btn-1" @click="approve">同意并继续</button>
            </div>
            <div class="btn-info">
                <button class="btn-1" @click="cancellation">取消</button>
            </div>
        </div>
    </div>
    <!-- 微信登录界面 -->
    <div :class="[wxCode?'':'hide', 'wxPage']" @click="closePage">
        <div class="wximg">
            <img src="../assets/img/login/f39f553432cd0f7eefaa22311daa181.png" />
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            // 是否微信登录码
            wxCode: false,
            // 是否显示协议
            agreement: false,
            // 是否显示登录界面
            loginVisible: false,
            // 播放视频
            playMp4: false,
            // 搜集登录数据
            loginFrom:{
                username:'admin',
                password:'123456'
            },
            // 输入框聚焦状态
            isFocused1: false,
            isFocused2: false,
            // 是否同意了用户协议
            radio: false,
            // 发送验证码等待时间
            waitingTime: 0,
            // 是否同意了该网站提出的用户协议
            treatyRadio: false
        }
    },
    methods: {
        // close
        closePage(){
            this.wxCode = false;
            this.treatyRadio = false;
            this.$refs.myRadio.checked = false;
        },
        // 取消按钮
        cancellation(){
            this.agreement = false;
            //
        },
        // 同意按钮
        approve(){
            this.treatyRadio = true;
            this.agreement = false;
            this.$refs.myRadio.checked = this.treatyRadio;
            this.wxCode = true;
        },
        // 父组件调用的方法
        changLoginStatus(){
            // 显示登录界面
            this.loginVisible = true;
        },
        // 是否同意协议
        treaty(){
            // 解决只能点击一次的问题
            if(this.treatyRadio == false){
                this.treatyRadio = true;
            } else {
                this.treatyRadio = false;
            }
            this.$refs.myRadio.checked = this.treatyRadio;
            //
        },
        // 获取验证码 ( 180秒冷却 ) [ 废弃 ]
        getVerify(){
            this.waitingTime = 180;
            let waitingTimes = setInterval(()=>{
                this.waitingTime--;
                if(this.waitingTime <= 0){
                    clearInterval(waitingTimes);
                    this.waitingTime = 0;
                }
            },1000);
            // 虚以待位 [ 百行代码 ]
        },
        // 新用户注册
        newUserRegister(){
            this.$message.error('请前往小红书 APP 注册!!!');
            // 虚以待位 [ 百行代码 ]
        },
        // 微信登录链接按钮
        wxLogin(){
            if(this.treatyRadio == false){
                this.agreement = true;
                return false;
            }
            this.wxCode = true;
            // 虚以待位 [ 百行代码 ]
        },
        // 登录方法 ( 登录按钮 )
        async goLogin(){
            if(this.loginFrom.username == '' || 'undefined' === this.loginFrom.username){
                this.$message.error('账号不能为空!!!');
                return false;
            }
            if(this.loginFrom.password == '' || 'undefined' === this.loginFrom.password){
                this.$message.error('密码不能为空!!!');
                return false;
            }
            if(!this.treatyRadio){
                this.$message.error('请先同意用户协议!!!');
                return false;
            }
            // 放弃了解构的方式接收获取到的数据,改为直接使用变量接收
            let res = await this.$http.post('login', this.loginFrom);
            console.log(res.data);
            if(res.data != null){
                // 存储token 
                sessionStorage.clear(); // 在登录前先清空之前默认用户的sessionStorage信息
                sessionStorage.setItem('token', res.data.token);
                sessionStorage.setItem('userid', res.data.id); // 存用户名ID
                sessionStorage.setItem('userName', res.data.username); // 存用户名
                sessionStorage.setItem('mobile', res.data.mobile); // 存用户电话
                sessionStorage.setItem('email', res.data.email); // 存用户邮箱
                // 清空输入框
                Object.keys(this.loginFrom).forEach((k)=>{
                    this.loginFrom[k] = '';
                });
                // 关闭登录界面
                this.loginVisible = false;
                // 信息反馈
                this.$message.success('登录成功!!!');
                sessionStorage.removeItem('seg')
            } else {
                this.$message.error('账号或者密码错误!!!');
                return false;
                //
            }

            // 登录成功后 保证页面在首页
            if(this.$route.path != '/') this.$router.push('/'); 
            // 虚以待位 [ 百行代码 ]
        },
        // 输入框聚焦
        handleInput(idx){
            console.log('你好');
            if(idx == 1){
                this.isFocused1 = true;
                this.isFocused2 = false;
            }
            if(idx == 2){
                this.isFocused2 = true;
                this.isFocused1 = false;
            }
        },
        // 测试
        tj(){
            console.log(this.loginFrom);
        },
        // 鼠标进入
        mouseenter(){
            console.log('鼠标进入!');
            this.playMp4 = true;
        },
        // 鼠标离开
        mouseleave(){
            console.log('鼠标离开!');
            this.playMp4 = false;
        }
    }
}
</script>

<style lang="less" scoped>
.wximg{
    width: 200px;height: 290px;background-color: white;position: fixed;margin: auto;left: 0;top: 0;right: 0;bottom: 0;
}
.wxPage{
    width: 100%;height: 100%;background-color: white;position: fixed;z-index: 15;
}
.btn-1{
    border: 0;background-color: rgba(255, 255, 255, 0);
    width: 100%;height: 100%;border-radius: 5px;color: rgba(20, 19, 19, 0.78);font-size: 16px;font-weight: bold;
}
.btn-1:hover{
    background-color: rgba(157, 168, 164, 0.125);color: black;
}
.btn-info{
    width: 300px;height: 40px;position: relative;margin: auto;left: 0;right: 0;top: 5px;
}
.text-info{
    text-align: center;width: 300px;height: 106px;position: relative;margin: auto;left: 0;right: 0;border-bottom: rgba(146, 141, 132, 0.389) 1px solid;
}
.tip-content{
    width: 320px;height: 215.4px;background-color: white;position: fixed;margin: auto;left: 0;top: 0;right: 0;bottom: 0;border-radius: 10px;
}
.wx-tip{
    width: 100%;height: 100%;background-color: rgba(99, 106, 106, 0.64);position: fixed;z-index: 13;
}
.btndiv{
    justify-content: center;display: flex;
}
.wx{
    position: relative;width: 160px;
    .wxsmd-img{
        width: 22px;height: 22px;position: absolute;top: 10px;left: 30px;z-index: 1;
    }
}
//额外添加input内联文字距离
.padding-left-1{
    padding-left: 20px; width: 300px !important;
}
.padding-left-2{
    padding-left: 20px;
}
.describes{
    height: 63px;
    position: relative;
    @height: 15px;
    .describe-text-1{
        width: 30px;height: 30px;position: absolute;background-color: rgba(218, 112, 214, 0);text-align: center;line-height: 30px;margin: auto;top: 26.2px;left: 41px;color: rgba(88, 84, 84, 0.709);
    }
    .describe-text-2{
        height: @height;text-align: center;line-height: @height;position: absolute;margin: auto;top: 33.2px;right: 58px;z-index: 2;cursor: pointer;color: rgb(159, 74, 74);text-align: end;
    }
    .describe-text-2:hover{
        color: rgba(175, 158, 158, 0.477);border-bottom: rgba(175, 158, 158, 0.477) 1px solid;
    }
}
// 使用了一点弹性盒子布局的内容
.link-btn{
    width: 340px;height: 40px;
    display: flex;justify-content: space-between;
}
.btns:hover{
    background-color: rgba(209, 194, 194, 0.103);box-shadow: rgba(45, 41, 41, 0.1) 2px 2px 2px;
}
.btns{
    // 初始化按钮
    border: 0;background-color: rgba(255, 255, 255, 0);
    // 重设按钮
    width: 161px;height:40px;border: rgba(209, 194, 194, 0.27) 1px solid;border-radius: 50px;
}
.top-box{
    width: 100%;height: 19px;border-bottom: rgba(209, 194, 194, 0.27) 1px solid;
}
.txt-box{
    width: 40px;height: 40px;position: absolute;line-height: 40px;background-color: white;color: rgb(175, 158, 158);
}
.bottom-box{
    width: 100%;height: 20px;
}
.otherwise-login{
    width: 340px;height: 40px;position: relative;
}
.agreementTxt{
    font-size: 13px;
}
.agreement{
    width: 276px;height: 60px;
}
.login-btn{
    width: 340px;margin-top: 12px;
}
.from-style{
    margin-top: -20px;
    input{
        margin-top: 20px;
    }
}
.myseleipt{
    border: 0;width: 304px;height: 40px;border-bottom: rgba(105, 154, 188, 0.528) 1px solid;border-radius: 100px;font-size: 16px;box-shadow: rgba(105, 154, 188, 0.528) 0px 3px 3px;margin: auto;bottom: 0;left: 0;right: 0;display: block;position: absolute;
}
.myipt{
    border: 0;width: 304px;height: 40px;border-bottom: rgba(187, 174, 174, 0.459) 1px solid;border-radius: 100px;font-size: 16px;margin: auto;bottom: 0;left: 0;right: 0;display: block;position: absolute;
}
.from-style{
    position: relative;
    width: 400px;height: 40px;
}
//右派
.title{
    color: rgba(88, 84, 84, 0.809);text-align: center;
}
//左派
.tutorial-block{
    width: 340px;height: 257.5px;background-color: red;
}
.mp4{
    width: 100%;height: 100%;
}
.tutorial-block-control{
    font-size:14px;width: 70px;height: 30px;border-radius: 50px 50px 50px 50px;line-height: 30px;cursor: pointer;margin-top: 30px;text-align: center;
}
.tutorial-block-control:hover{
    background-color: rgba(187, 174, 174, 0.2);
}
.describe-text{
    width: 237px;font-weight: bold;margin-top: 30px;
}
.QRCode{
    width: 150px;height: 150px;
}
.QRCode-block{
    margin-top: 35px;position: relative;
    width: 170px;height: 170px;border: rgba(187, 174, 174, 0.459) 1px solid;
}
.img{
    width: 91.0834px;height: 48px;
}
.center-boder{
    width: 0.5px;height: 100%;position: absolute;background-color: rgba(187, 174, 174, 0.459);margin: auto;left: 0;right: 0;top: 0;
}
.right-container{
    position: relative;float: left;
    width: 400px;height: 408.6px;
}
.left-container{
    position: relative;float: left;
    width: 400px;height: 408.6px;
}
// 退出按钮 X
.exit{
    line-height: 31.5px;font-size: 30px;font-weight: lighter;border-radius: 50%;margin: auot;right: 10px;bottom: 0;position: absolute;width: 30px;height: 30px;text-align: center;
}
.exit:hover{
    background-color: rgba(161, 143, 143, 0.2);
}
.top{
    cursor: pointer;position: relative;
    width: 100%;height: 40px;
    border-radius: 12px 12px 0px 0px;
}
.main-container{
    margin: auto;top: 0;bottom: 0;right: 0;left: 0;
    position: absolute;
    width: 800px;height: 448.6px;background-color: white;
    border-radius: 12px;
}
//隐藏
.hide{
    display: none;
}
.mask{
    position: fixed;
    z-index: 10;
    margin: auto;top: 0;left: 0;
    width: 100%;height:100%;background-color: rgba(114, 90, 90, 0.6);
}
//图片
img{
    width: 100%;height: 100%;
}
// 内容居中
.centerEle{
    margin-left: auto !important;margin-right: auto !important;
}
// 四面相对居中
.fourSides-center{
    margin: auto;top: 0;right: 0;bottom: 0;left: 0;position: absolute;
}
</style>
